<template>
  <div class="box">
  <div class="left">
    <span>绍兴市</span><br />
    <p>越城区</p>
    <p>河桥区</p>
    <p>上虞区</p>
    <p class="xinchangx">新昌县</p>
    <p>昌州区</p>
    <p>诸暨市</p>
  </div>
  <div class="left-1">
    <span>违规建筑工地</span><br />
    <p>棚户区拆除工程(12)</p>
    <p>二环道路工程(10)</p>
    <p class="lingz">灵芝区工程(4)</p>
    <p>天下花园工程(1)</p>
    <p class="weiweigui">未违规建筑工地</p>
    <p>泗汇江小区工程</p>
  </div>
  <div class="left-2">
     <div class="top"><span>灵芝小区工程(12/17)</span>
     </div>
     <div class="left-2main">
      <img src="http://a1.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhCphRJASmTRTZIOnIoCr5MJKS4nYpkXk9nICkQPDUF3n1DRwiQDZuYORF.Z0*pooYQ!!/m&ek=1&kp=1&pt=0&bo=WAKQAVgCkAERFyA!&tl=3&vuin=2155904196&tm=1584543600&sce=60-4-3&rf=0-0" />
      <img src="http://a1.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhG1QVgOC*0cB8htS9QVG*.DdZxYb66wCMgl8xRo.5y54Vcnrw.5KhmwveA2zkZACsw!!/m&ek=1&kp=1&pt=0&bo=uAEmAbgBJgERFyA!&tl=3&vuin=2155904196&tm=1584543600&sce=60-4-3&rf=0-0" />
      <img src="http://a1.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhCx84IInvMAljZMIcPz6q7kVdVeGcoNmBadjXf17H5TUcPBaCbExloDDsskmYjF6Tw!!/m&ek=1&kp=1&pt=0&bo=sARDA7AEQwMRFyA!&tl=3&vuin=2155904196&tm=1584543600&sce=60-4-3&rf=0-0" />
      <img src="http://b398.photo.store.qq.com/psb?/V14VhdsL1bC6bu/cZOtlOjtH0OHzstvb.JSCyFVKW50eOUC2SLbtl20fl4!/b/dI4BAAAAAAAA&bo=4AFWAwAAAAARB4Q!&rf=viewer_4" />
      <img src="http://m.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhKm04FbyBb.DxM9mhNsaFKLXOgKB9ecdR5sjwsUml9JN8yqSAHZhfCKIPhdj1Ie4GQ!!/mnull&bo=yADIAMgAyAARBzA!&rf=photolist&t=5" />
      <img src="http://m.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhKm04FbyBb.DxM9mhNsaFKLXOgKB9ecdR5sjwsUml9JN8yqSAHZhfCKIPhdj1Ie4GQ!!/mnull&bo=yADIAMgAyAARBzA!&rf=photolist&t=5" />
  </div>
  </div>
  <div class="tupian">
    <img src="http://m.qpic.cn/psc?/V14VhdsL39BG0O/tS3tY63exiZNUWwJevnZGvkvJo3szLzoqsHZLOo4H0IvLi7lqdR2vrwn0uYAFVrlHV8zAQo.jBK99qhOmrb1f7S1VGiMFxT6sjR.AU.WtP8!/b&bo=uAEmAbgBJgERFyA!&rf=viewer_4"/>
  </div>
  <div class="right" ref="main">
    <div class="r-top">灵芝小区工程</div>
  <div class="main-content">
  <div class="xinxi">
  <h2>基本信息</h2>
   <ul>
      <li>
        工地类型:<span>建筑工地</span></li>
      <li>申报量:&nbsp;<span>400吨</span></li>
      <li>已收运量:<span>20吨</span></li>
   </ul>
   </div>
  <div class="guanliyuan">
      <h2>管理员</h2>
      <div class="touxian">
      <img src="http://m.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhKm04FbyBb.DxM9mhNsaFKLXOgKB9ecdR5sjwsUml9JN8yqSAHZhfCKIPhdj1Ie4GQ!!/mnull&bo=yADIAMgAyAARBzA!&rf=photolist&t=5"/>
      <div class="touxian-1">
      <h3>王茗</h3><span>12345678878</span>
      </div>
      </div>
      <div class="touxian-2">
      <img src="http://m.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhKm04FbyBb.DxM9mhNsaFKLXOgKB9ecdR5sjwsUml9JN8yqSAHZhfCKIPhdj1Ie4GQ!!/mnull&bo=yADIAMgAyAARBzA!&rf=photolist&t=5"/>
      <div class="touxian-3">
      <h3>王茗</h3><span>12345678878</span>
      </div>
  </div>
  </div>
  </div>
  </div>
  <div class="yuan">
  <ul class="yuan-li">
  <li><Yuan></Yuan><span>PM2.5</span></li>
  <li><Yuan></Yuan><span>PM10</span></li>
  <li><Yuan></Yuan><span>运输车次</span></li>
  <li><Yuan></Yuan><span>运输量</span></li>
  </ul>
  </div>
  <ul class="zhextu">
      <li>
          <b>配送时段配送量情况</b>
          <span>本月</span>
          <span>上月</span>
          <Zhex></Zhex>
      </li>
      <li>
          <b>累计违规次数</b>
          <Zhex></Zhex>
      </li>
  </ul>
  <ul class="zhextu-1">
      <li>
          <b>每月运送量趋势</b>
          <span>本月</span>
          <span>上月</span>
          <Zhex></Zhex>
      </li>
      <li>
          <b>违规高发类型</b>
          <Zhex></Zhex>
      </li>
  </ul>
  </div>
</template>
<script>
import Yuan from '@/components/yuan-lixuej.vue'
import Zhex from '@/components/zhex-lixuej.vue'
export default {
  data () {
    return {
    }
  },
  components: {
    Yuan, Zhex
  },
  mounted () {
  // this.reviewEharts()
  },
  methods: {
  // reviewEharts(){
  // //导入echarts
  // const echarts=require('echarts')
  // //创建自己的图表初始化
  // const myChart=echarts init(this.$refs.main)
  // }
  }
}
</script>
<style scoped="scoped">
 html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
    }
ul{
list-style: none;
}
.box{
  margin-top: 80px;
  position: relative;
  background-image: url(http://a1.qpic.cn/psc?/V14VhdsL39BG0O/ZOHqlMnlPhi5393oWyanhEf5LR6AdwG54xOZ9Qlbssak7pIkwn6kJQCpbnuTTAtQFySm2vrG7Zv.p5x.E8ou9Q!!/b&ek=1&kp=1&pt=0&bo=gAeEA4AHhAMRNwA!&tl=3&vuin=2155904196&tm=1584543600&sce=60-4-3&rf=viewer_4);
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  /* background-position:center; */
  width: 100%;
  background-size: 100% 100%;
  height: 740px;
  /* opacity: 0.88;
  filter:alpha(opacity=70); */
    }
.left{
  width: 6%;
  height: 100%;
  background-color: #364250;
  border-right: 2px solid #5A5D5D;
  display: inline-block;
  opacity: 0.84;
}
.left span{
  color: #A2D5EC;
  font-size: 20px;
  margin: 20px 0 0 16px;
  /* padding:40px 0 0 18px; */
  position: absolute;
}
 p{
  color: white;
  font-size: 16px;
  margin-left:18px;
  margin-top: 30px;
  padding-top: 20px;
}
.left .xinchangx{
  color: #C0C8D4;
}
.left-1{
  width: 9%;
  height: 100%;
  background-color: #2E3441;
  border-right: 1px solid #5A5D5D;
  /* float: right; */
  /* margin-right:1220px ; */
  opacity: 0.82;
  display: inline-block;
}
.left-1 span{
  color: #B35A30;
  font-size: 20px;
  margin:20px 0 0 18px;
  position: absolute;
}
.left-1 p{
  color: #A7A8AC;
}
.left-1 .lingz{
  color:#98BCCD;
}
.left-1 .weiweigui{
  color:#B35A30 ;
  }
.left-2{
  width: 14%;
  height: 100%;
  background-color: #373B3F;
 border-right: 2px solid #5A5D5D;
  /* margin-left:185px ; */
  opacity: 0.7;
  position: absolute;
  display: inline-block;
  text-align: center;
  }
  .left-2main{
  overflow-y: scroll;
  display: inline-block;
  width: 97%;
  height: 90%;
  }
::-webkit-scrollbar-thumb
  {
  border-radius: 60px;
  background-color: #F5F5F5;
  }
  /* ::-webkit-scrollbar-track{
  display: none;
  } */
  ::-webkit-scrollbar
  {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
    width: 6px;
  background-color: #7D7C77;
  }
.left-2 .top{
  font-size: 20px;
  background-image: linear-gradient(to right, #1A3980, #7D2729);
  color: white;
  width: 94%;
  height: 30px;
  line-height: 30px;
  margin: 20px 0 10px 10px;
}
.left-2 .top span{
 font-size: 18px;
  margin-left: -60px;
}
.left-2 img{
  width: 240px;
  height: 140px;
  margin: 4px 0;
}
.tupian img{
  width: 160px;
  height: 95px;
}
.tupian{
  position: absolute;
  display: inline-block;
  margin:18px 0 0 980px;
  border: 2px solid #DF5D2D;
  box-shadow:6px 6px 20px 6px #A57F73;
}
.right{
  width: 22%;
  height: 600px;
  border: 2px solid #5A5D5D;
  position: absolute;
  display: inline-block;
  background-color: #27333F;
  margin:24px 1160px;
  opacity: 0.8;
  overflow: hidden;
}
.r-top{
  width:100%;
  height: 35px;
  padding-left: 14px;
  line-height: 35px;
  border-bottom: 2px solid #2E333A;
  font-size: 18px;
  color: white;
  font-weight:bold;
}
.main-content{
  width: 100%;
  border-bottom: 2px solid #2E333A;
  overflow: hidden;
}
 h2{
  color: white;
  margin-left: 9px;
}
.xinxi ul {
  list-style: none;
  font-weight: bold;
  font-size: 12px;
  padding: 0;
}
.xinxi ul li{
  color:#64686B;
  margin: 8px 0 0 12px;
}
.xinxi ul li span{
  color: white;
  margin-left: 8px;
}
.xinxi{
  display: inline-block;
}
.guanliyuan{
  /* float: right; */
  display: inline-block;
  /* position: absolute; */
  overflow: hidden;
  margin-left: 26px;
  width: 250px;
}
.touxian,.touxian-2{
  width: 120px;
  height: 40px;
 /* margin-left: 10px; */
  /* overflow: hidden; */
  display: inline-block;
}
.touxian img,.touxian-2 img{
  border-radius:50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  /* vertical-align:middle; */
}
.touxian-1, .touxian-2{
  float: right;
  /* margin-right:0; */
}
.touxian-2{
  margin-left: 10px;
}
.touxian-1 h3,span , .touxian-3 h3,span{
  color: white;
  margin: 0;
  padding: 0;
}
.clear{
  clear: right;
}
/* .touxian-2{
  width: 50px;
} */
.touxian-3{
  float: right;
  display: inline-block;
  position: absolute;
  /* margin-right: 10; */
  /* overflow: hidden; */
  width: 70px;
}
.yuan li{
  float: left;
  margin-left: 28px;
}
.yuan{
  margin-left: 16px;
  float: right;
  margin-left: 1120px;
  margin-top: 170px;
  position: absolute;
  display: inline-block;
}
.yuan span{
  font-size: 15px;
  margin-left: 18px;
  color: #84888b;
}
.bottom{
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  float: right;
}
.bottom-left{
  display: inline-block;
  float: right;
}
.fl{
  display: inline-block;
  background-color: darkkhaki;
  font-size: 14px;
  color: #84888b;
  /* margin-left: 5px; */
  text-decoration: underline;
  float: right;
}
.left-3{
  float: right;
  margin-right: 600px;
}
.f2{
  text-decoration: underline;
  background-color: darkkhaki;
  font-size: 12px;
  /* color: #84888b; */
  display: inline-block;
  /* margin-left: 20px; */
}
.span1{
  font-size: 14px;
  color: #84888b;
}
.zhextu {
  float: right;
  display: inline-block;
  position: absolute;
  margin-left: 1150px;
  margin-top: 260px;
}
.zhextu li, b,span{
  color: white;
  margin-top: 40px;
  font-size: 14px;
}
.zhextu-1 {
  float: right;
  display: inline-block;
  position: absolute;
  margin-left: 1360px;
  margin-top: 260px;
}
.zhextu-1 li, b,span{
  color: white;
  margin-top: 40px;
  font-size: 12px;
}
</style>
